<template>
  <div class="song_lyric">
    <Header title="音乐播放" go-back="true"></Header>
    <div class="wrapper" ref="wrapper">
      <ul class="content">
        <li v-for="(line,index) in handleSong" :key="index">{{line}}</li>
      </ul>
      <p v-if="songText === ''">
        没有歌词
      </p>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import {songLyric} from '../../../api/node'
import {loadSongId, saveLyricWord} from '../../../api/storage'
import BScroll from 'better-scroll'

export default {
  name: 'songLyric',
  data () {
    return {
      songText: '',
      handleSong: [],
      errortext: ''
    }
  },
  watch: {
  },
  mounted () {
    // better-scroll的实例初始化要放在vm.$nextTick()里面才生效
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {})
    })
  },
  methods: {
    _songLyric () {
      songLyric(loadSongId()).then(res => {
        if (res.code === 200) {
          if (res.lrc.lyric !== undefined) {
            var splitSonge = res.lrc.lyric.split('\n')
          } else {
            this.errortext = '暂无歌词'
          }
          this.songText = splitSonge
          if (this.songText) {
            saveLyricWord(this.songText)
          }
          // 处理歌词（整理出所有文字）
          var handelesong = this.songText
          // console.log(handelesong)
          var TextWord = []
          for (var i = 0; i < handelesong.length; i++) {
            var reg = /\[\d*:\d*(\.\d*)*\]/g
            var timeArr = handelesong[i].match(reg) // 时间
            var textArr = handelesong[i].replace(timeArr, '') // 歌词文字
            TextWord.push(textArr)
            this.handleSong = TextWord
          }
        }
      })
    }
  },
  created () {
    this._songLyric()
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.song_lyric{
  width: 100%;
  padding-top: 60px;
  background: url("../../../assets/Image/playBg.png") no-repeat;
  background-size: 100% 100%;
  height: 626px;
  position: absolute;
  display: flex;
  overflow: hidden;
  justify-content: center;
  .wrapper{
    .content{
      width: 100%;
      text-align: center;
      li{
        font-size: 15px;
        line-height: 30px;
        color: #927712;
      }
    }
    p{
      font-size: 15px;
      padding-top: 100px;
      color: #999;
    }
  }
}
</style>
